<template>
	<page-wraper>
		<view>
			<wd-img width="100%" :height="280" src="https://www.ytad-pep.com/bg.jpg" />

			<view class="custom-card" style="padding-top: 10px; margin-top: 10px;">
				<view style="margin-bottom: 10px;">易行邮</view>
				<wd-form ref="form" :model="model" errorType="toast">
					<wd-cell-group border>
						<wd-input label="电子邮箱" label-width="100px" prop="email" clearable v-model="model.email"
							placeholder="请填写电子邮箱" :rules="[{ required: true, message: '请填写电子邮箱' }]" />
						<input type="password" class="nonPwd" />
						<wd-input label="登录密码" label-width="100px" prop="password" show-password clearable
							v-model="model.password" placeholder="请输入登录密码"
							:rules="[{ required: true, message: '请填写登录密码' }]" autocomplete="off" />
					</wd-cell-group>
				</wd-form>
			</view>

			<view style="padding: 10px 15px;">
				<view style="margin-bottom: 10px;">
					<wd-checkbox v-model="user_service_proto" shape="square">
						<view style="display: inline; color: var(--wot-button-primary-bg-color, var(--wot-color-theme, #4d80f0)); font-size: 12px;" @click="openProtocol">用户服务协议</view>
					</wd-checkbox>
				</view>
				<wd-button type="primary" size="large" @click="handleSubmit" block :disabled="!user_service_proto">登录</wd-button>
				<wd-button type="default" size="small" @click="forget" block custom-style="margin-top: 10px; color: var(--wot-button-primary-bg-color, var(--wot-color-theme, #4d80f0));">忘记密码</wd-button>
				<wd-button type="default" size="small" @click="cancelLogin" block custom-style="margin-top: 10px; color: var(--wot-button-primary-bg-color, var(--wot-color-theme, #4d80f0));">取消登录</wd-button>
			</view>
			
			<view style="position: absolute; bottom: 20px; text-align: center; width: 100%;">
				<view style="display: inline; color: var(--wot-button-primary-bg-color, var(--wot-color-theme, #4d80f0));" @click="register">注册新的账号？</view>
			</view>
		</view>
	</page-wraper>
</template>
<script lang="ts" setup>
	import { useToast } from '@/uni_modules/wot-design-uni'
	import type { FormInstance } from '@/uni_modules/wot-design-uni/components/wd-form/types'
	import { reactive, ref } from 'vue'
	import { setToken } from '../../store'
	import { onLoad } from '@dcloudio/uni-app';

	const { success: showSuccess, error: showError, loading: showLoading, close: closeToast } = useToast()
	const model = reactive<{
		email : string
		password : string
	}>({
		email: '',
		password: ''
	})
	const code = ref('');
	const user_service_proto = ref(false);

	const form = ref<FormInstance>()
	
	onLoad((query: any) => {
		if (query.code) {
			uni.setStorageSync("code", query.code);
		}
	});
	
	function openProtocol() {
		uni.navigateTo({ url: `/pages/protocol/Index?type=user_service_proto&title=用户服务协议` });
	}
	
	function register() {
		uni.redirectTo({
			url: '/pages/register/Index'
		})
	}
	
	function forget() {
		uni.redirectTo({
			url: '/pages/forget/Index'
		})
	}
	
	function cancelLogin() {
		uni.reLaunch({
			url: '/pages/index/Index'
		})
	}

	function handleSubmit() {
		form
			.value!.validate()
			.then(async ({ valid, errors }) => {
				if (valid) {
					showLoading('登录中...');

					const res = await uni.$http.post('passport/authenticate-x', {
						email: model.email,
						password: model.password
					});

					closeToast()

					if (res.data.code == 0) {
						setToken(res.data.data.access_token);

						uni.redirectTo({
							url: '/pages/index/Index'
						})
					} else {
						showError(res.data.msg);
					}
				}
			})
			.catch((error) => {
				console.log(error, 'error')
			})
	}
</script>
<style lang="scss" scoped>
	.nonPwd {
		height: 1px;
		width: 1px;
		display: none;
	}
	
	.custom-card {
		padding: var(--wot-card-padding, 0 var(--wot-size-side-padding, 15px));
		background-color: var(--wot-card-bg, var(--wot-color-white, rgb(255, 255, 255)));
		line-height: var(--wot-card-line-height, 1.1);
		margin: var(--wot-card-margin, 0 var(--wot-size-side-padding, 15px));
		border-radius: var(--wot-card-radius, 8px);
		box-shadow: var(--wot-card-shadow-color, 0px 4px 8px 0px rgba(0, 0, 0, 0.02));
		font-size: var(--wot-card-fs, var(--wot-fs-content, 14px));
		padding-top: 5px;
		padding-bottom: 5px;
	}
</style>